<template>
  <f7-page class="qm-page">
    <f7-link icon-f7="chevron_left" class="arrow" back></f7-link>
    <f7-block class="qm-block">
      <img src="static/img/land/index3/tubiao.png" alt="" class="img" />
      <h2 style="margin-top: 0px">欢迎登录工地智采</h2>
      <f7-card class="qm-card">
        <div class="ID">
          <img
            src="static/img/land/index6/my.svg"
            alt=""
            class="iconimg"
          />账号
        </div>
        <qm-search
          placeholder="请输入您的账号"
          v-model="user"
          label=""
          shape="round"
          clearable
          left-icon=""
        >
        </qm-search>
        <div class="password">
          <img
            src="static/img/land/index6/cooking.svg"
            alt=""
            class="iconimg"
          />
          密码
        </div>
        <qm-search
          placeholder="请输入您的密码"
          v-model="password"
          :clearable="false"
          shape="round"
          left-icon=""
          :type="textstyle"
        >
          <template #right-icon>
            <img
              src="static/img/land/index1/biyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-if="!showpassword"
              @click="modifypassword()"
            />
            <img
            src="static/img/land/index1/kaiyan.svg"
            alt=""
            width="30px"
            height="12px"
            v-else
            @click="modifypassword()"
          />
          </template>
        </qm-search>
        <f7-row>
          <f7-col><f7-link>立即注册</f7-link></f7-col>
          <f7-col style="text-align: end"
            ><f7-link class="qm-link">忘记密码</f7-link></f7-col
          >
        </f7-row>
        <f7-button raised fill round class="qm-button">登录</f7-button>
      </f7-card>
      <qm-divider class="divider" :hairline="false"> 第三方登录 </qm-divider>
      <f7-row class="qm-row">
        <f7-col
          ><img src="static/img/land/index1/weixin.png" alt=""
        /></f7-col>
        <f7-col
          ><img src="static/img/land/index1/renlian.png" alt=""
        /></f7-col>
        <f7-col
          ><img src="static/img/land/index1/shouji.png" alt=""
        /></f7-col>
      </f7-row>
      <div class="footer">广州市齐明软件科技有限公司提供技术支持</div>
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      user: "",
      password: "",
      showpassword: false,
    };
  },
  computed: {
    textstyle() {
      if (this.showpassword) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  methods: {
    modifypassword() {
      this.showpassword = !this.showpassword;
    },
  },
};
</script>

<style lang="less" scoped>
.arrow {
  position: fixed;
  color: var(--color-brand);
  margin-top: 10px;
  left: 6%;
}
.qm-page {
  background: url("../../../../static/img/land/index6/bgc6.png");
  background-repeat: no-repeat;
  margin: 0px;
  background-size: 100% auto;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  text-align: center;
  .qm-block {
    text-align: center;
    margin-top: calc(134px * var(--ratio));
    .img {
      width: calc(134px * var(--ratio));
      height: calc(134px * var(--ratio));
    }
    h2 {
      font-weight: 600;
      color: #03041f;
    }
    .qm-card {
      margin: 0px;
      --f7-card-border-radius: 20px;
      text-align: left;
      padding: 0px calc(62px * var(--ratio)) calc(56px * var(--ratio));
      .iconimg {
        width: 20px;
        height: 20px;
        margin-bottom: -4px;
        margin-right: 6px;
      }
      .ID {
        padding-top: calc(67px * var(--ratio));
        color: #28282c;
        font-size: 14px;
        font-weight: 600;
      }
      .password {
        padding-top: calc(36px * var(--ratio));
        color: #28282c;
        font-size: 14px;
        font-weight: 600;
      }
      .qm-link {
        font-size: 13px;
        color: var(--color-brand);
        margin-bottom: calc(75px * var(--ratio));
      }
      .qm-button {
        background-color: var(--color-brand);
        font-size: var(--font-size-maintitle);
        --f7-button-raised-box-shadow: auto;
      }
    }
    /deep/ .van-cell {
      height: calc(90px * var(--ratio));
      line-height: calc(90px * var(--ratio));
      padding: 0px calc(20px * var(--ratio));
    }
    /deep/ .van-search {
      padding: 5px 0px;
    }
    /deep/ .van-search__content {
      background-color: #f1f4f8;
    }
    .divider {
      margin: calc(50px * var(--ratio)) calc(94px * var(--ratio)) 0px;
    }
    .qm-row {
      margin: calc(58px * var(--ratio)) calc(94px * var(--ratio)) 0px;
      text-align: center;
      img {
        width: calc(82px * var(--ratio));
        height: calc(82px * var(--ratio));
      }
    }
    .footer {
      position: absolute;
      text-align: center;
      color: #959cb2;
      margin-top: 120px;
      font-size: 12px;
      left: 0px;
      right: 0px;
    }
  }
  /deep/input:-webkit-autofill { box-shadow: 0 0 0px 1000px #f5f7fa inset !important;}
}
</style>
